<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        @keyframes blink {

            50% {
                opacity: 0
            }
            100% {
                opacity: 1
            }
        }

        @-webkit-keyframes blink {
            50% {
                opacity: 0
            }
            100% {
                opacity: 1
            }

        }

        @-moz-keyframes blink {
            50% {
                opacity: 0
            }
            100% {
                opacity: 1
            }

        }
        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto;
        }
        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }
        .word {
            font-weight: 700;
        }
        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink 1s infinite;
            -moz-animation: blink 1s infinite;
            animation: blink 1s infinite;

        }
        .saySection {
            margin-top: 30px;
        }
        .saySection input {
            font-size: 30px;
        }
        .txtSay {
            padding-left: 10px;
        }
        .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrap">

    <h1>
        You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
    </h1>

    <div class="saySection">
        <input type="text" id="inValue" class="txtSay"/>
        <input type="button" value="Say" id="btnSay" class="btnSay"/>
    </div>

</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
    var str = "红鲤鱼与绿鲤鱼与驴";
    var arr =  str.split("");
    var str2 = "";
    var num = 0;
    var timer = null;
    timer = setInterval(function () {
        if(arr[num]===undefined){
            clearInterval(timer);
        }else{
            str2 +=arr[num];
            $('.word').text(str2);
            num++;
        }
    },300);
</script>
</body>
</html>